<template>
  <div>
    <!-- <h1>深度选择器</h1>
    
    <van-checkbox class="myClass" v-model="checked">复选框</van-checkbox> -->


    <!-- 
      标签分三种类型
      1. span a b    都在同一行显示，设置宽高不生效，宽为内容的宽   内联元素 行内元素  inline
      2. img input  button  都在同一行显示，可设置宽高   内联块元素 行内块元素 inline-block
      3. p div  块元素  width就是 100%  可以设置宽高  独占一行    块元素  block

      display: block
      display: inline-block
      display: inline
      display: none
      


      内联元素和内联块元素  设置水平居中
      需要有一个父级块元素，给父元素设置 text-align:center


      块元素居中：
        1. 内容居中   宽度还是100%，文字居中   text-align:center
        2. 整个块元素居中 先设置宽度不是100%
     -->
     <!-- <div class="align-center">
      <span>hello span标签</span>
    </div>
    <p class="align-center">hello p标签</p>
    <p class="two"></p>
    <div class="align-center">
      <img src="./../assets/1.webp" width="100"/>
    </div> -->
    <van-tabs v-model="active">
      <van-tab title="标签 1">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // checked: true
      active: 0
    }
  },
  mounted () {
    this.active = this.$route.query.active*1
  }
}
</script>

<style scoped>
/* .two{
  height: 30px;
  width:50%;
  background: darkcyan;
  margin-left: auto;
  margin-right: auto;
}
span{
  background: antiquewhite;
} */
/* 可以对当前界面定义的class修改样式 */
/* .myClass{ */
  /* 生效 */
  /* background: red;    */
/* } */

/* 直接用选择器不生效 */
/* .myClass .van-icon-success{
  background: red;
} */

/* .myClass >>> .van-icon-success{
  background: red;
} */


</style>